/*
 * @Author: xiaoyan
 * @Date: 2021-09-15 16:56:43
 * @LastEditors: xiaoyan
 * @LastEditTime: 2021-09-30 14:43:56
 * @Description: 
 * @FilePath: \vue3-ts-demo\src\store\modules\app.ts
 */
import {
    Store as VuexStore,
    CommitOptions,
    Module,
    DispatchOptions,
    ActionContext,
  } from 'vuex'
import {setSidebarStatus} from "@/utils/cookies"
  import { RootState } from '@/store'

  export enum DeviceType {
    Mobile,
    Desktop,
  }
type Sidebar = {
    opened:boolean
    withoutAnimation:boolean
}
export interface AppState {
    device: DeviceType
    sidebar: Sidebar
    language: string
    size: string
}

export type Mutations<S = AppState> = {
    SET_LANGUAGE(state:S,withoutAnimation: boolean):void
    CLOSE_SIDEBAR(state:S,withoutAnimation: boolean):void
    TOGGLE_DEVICE(state:S,device: DeviceType):void  
}
type AugmentedActionContext = {
    commit<K extends keyof Mutations>(
      key: K,
      payload: Parameters<Mutations[K]>[1],
    ): ReturnType<Mutations[K]>
  } & Omit<ActionContext<AppState, RootState>, 'commit'>
  
export interface Actions {
    ToggleSidebar({commit}:AugmentedActionContext,withoutAnimation:boolean):void
    CloseSidebar({commit}:AugmentedActionContext,withoutAnimation:boolean):void
    ToggleDevice({commit}:AugmentedActionContext,device:DeviceType):void
}

export type AppStore<S = AppState> = Omit<VuexStore<S>, 'getters' | 'commit' | 'dispatch'>
& {
  commit<K extends keyof Mutations, P extends Parameters<Mutations[K]>[1]>(
    key: K,
    payload: P,
    options?: CommitOptions
  ): ReturnType<Mutations[K]>
} & {
  dispatch<K extends keyof Actions>(
    key: K,
    payload: Parameters<Actions[K]>[1],
    options?: DispatchOptions
  ): ReturnType<Actions[K]>
};

export const store: Module<AppState, RootState> = {
    getters:{
        
    },
    state:{
        device: DeviceType.Desktop,
        sidebar: {
            opened: false,
            withoutAnimation: false
        },
        language: 'zh',
        size: 'medium'
    },
    mutations:{
        TOGGLE_SIDEBAR:(state:AppState,withoutAnimation: boolean)=>{
            state.sidebar.opened = !state.sidebar.opened
            state.sidebar.withoutAnimation = withoutAnimation
            if (state.sidebar.opened) {
                setSidebarStatus('opened')
            } else {
                setSidebarStatus('closed')
            }
        },
        CLOSE_SIDEBAR:(state: AppState, withoutAnimation: boolean)=>{
            state.sidebar.opened = false
            state.sidebar.withoutAnimation = withoutAnimation
            setSidebarStatus('closed')
        },
        TOGGLE_DEVICE:(state: AppState, device: DeviceType)=>{
            state.device = device
        },
    },
    actions:{
        ToggleSidebar({commit},withoutAnimation: boolean){
            commit("TOGGLE_SIDEBAR",withoutAnimation);
        },
        CloseSidebar({ commit }, withoutAnimation: boolean){
            commit("CLOSE_SIDEBAR", withoutAnimation)
        },
        ToggleDevice({commit},device:DeviceType){
            commit("TOGGLE_DEVICE",device)
        },
    },

}